<template>
    <div id="app" @click="clickEvent">
        <router-view />
    </div>
</template>
<script>
export default {
    methods: {
        // 点击显示代码按钮触发事件
        clickEvent(evnt) {
            const pElem = evnt.target;
            if (pElem && pElem.className === "demo-code") {
                const nextElem = pElem.nextSibling.nextSibling;
                if (nextElem && nextElem.tagName.toLowerCase() === "pre") {
                    if (nextElem.className.indexOf("is-show") > -1) {
                        nextElem.className = "";
                    } else {
                        nextElem.className = "is-show";
                    }
                }
            }
        },
    },
};
</script>
<style lang="less">
#nprogress .bar {
    background: #3a8ee6 !important; /*自定义颜色*/
    height: 4px !important;
}

.examples p {
    margin: 14px 0;
    font-size: 14px;
}

.demo-code {
    cursor: pointer;
    font-size: 15px;
    color: #409eff;
    font-weight: bold;
    text-align: center;
    user-select: none;

    &:before {
        content: ">> ";
    }

    &:hover {
        text-decoration: underline;
    }

    & + pre {
        display: none;

        &.is-show {
            display: block;
        }
    }
}

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #333;
    color: white;
}

// .hljs-tag { color: #62c8f3;}

</style>

<style lang="less" rel="stylesheet/less" scoped>

#app {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;

    &::-webkit-scrollbar {
        width: 0 !important;
    }

    /deep/ .el-dialog__wrapper {
        .el-dialog__footer {
            padding: 0 20px 20px;
        }
    }

    /deep/ .above_dialog {
        display: flex;
        justify-content: center;
        align-items: Center;
        overflow: hidden;

        .el-dialog {
            margin: 0 auto !important;
            height: 90%;
            overflow: hidden;

            .el-dialog__body {
                height: calc(100% - 101px);
                padding: 15px;
                z-index: 1;
                overflow: hidden;
                overflow-y: auto;
            }

            .el-dialog__footer {
                position: absolute;
                left: 0;
                bottom: 0;
                padding: 0 15px 15px;
                width: 100%;
            }
        }

        &.hide_footer {
            .el-dialog {
                .el-dialog__body {
                    height: calc(100% - 44px);
                }
            }
        }
    }
}
</style>
